<script lang="ts">
import { defineComponent, ref, watch, onUnmounted,onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getSearchlist } from '../api/search'
// import { useRoute } from 'vue-router'
import { viewCount, filters, vidotime } from '../hooks/filters'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
import { useScroll } from '../hooks/useScroll'

import SearchInput from '../components/SearchInput.vue'
export default defineComponent({
  components: {
    SearchInput

  },
  setup() {
    const store = useCounterStore();

    const { idarr } = storeToRefs(store)
    // 作为 action 的 increment 可以直接解构
    const { increment, incrementfalse } = store;


    let router= useRouter();
    let route: any = useRoute();
    // tab栏数据设置
    let active= ref(0);
    let searchactive: any = ref(0);
    let actives: any = ref(0)
    // 搜索框数据显示、
    let valueadd: any = route.query.value
    const value = ref(valueadd);
    // 请求接口数据搜索列表
    let getSearchlistlist: any = ref([])
    let relate_kwseo: any = ref(null)
    let sort: any = ref("default")

    let page: number = 1;
    let scrollTop = ref<number>(document.documentElement.scrollTop);
    let isbottom = ref(false);
    let isloading: any = ref(false);
    let total: any = ref();



    // 获取文章内容
    const getSearchlistFun = () => {
      getSearchlist({
        type: "article",
        kw: valueadd,
        sort: sort.value,
      }).then((data: any) => {
        console.log(data);
        // getSearchlistlist.value = data.data.list;
        total.value = data.data.total;

        data.data.list.forEach((item: any) => {
          getSearchlistlist.value.push(item)
        });
        console.log('搜索结果=>',getSearchlistlist.value)
        relate_kwseo.value = data.data.relate_kw4seo
      })
    }
    // 获取搜索以后的创作者
    let authorlist: any = ref(null)
    const getSearchlistauthorFun = () => {
      getSearchlist({
        type: "creator",
        kw: valueadd,
      }).then((data: any) => {
        console.log("authorlist", data);
        authorlist.value = data.data.list

      })
    }
    let onscroll = () => {
      scrollTop.value = document.documentElement.scrollTop;
      isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
      console.log('9999999999999', isbottom.value)
    }
    watch(isbottom, () => {
      // console.log(page*10,total.value)
      // if (page * 10 >= total.value) {
      //   console.log(111111111);
      //   return;
      // }
      if (isbottom.value) {
        page += 1;
        isloading.value = true;
        console.log('222222222page=>', page);
  
        console.log('isloading', isloading.value);
        setTimeout(() => {
          isloading.value = false;
          console.log('222222222page=>', page);
          getSearchlistFun();

        }, 500)

      }

    })
    onMounted(() => {
      getSearchlistFun();
      window.addEventListener('scroll', onscroll);

    })
    onUnmounted(() => {
      window.removeEventListener('scroll', onscroll)
    })

    // 回车事件
    const onSearch: any = (val: any) => {
      page = 1;
      // console.log(val);
      // if (val=='') {
      //   router.push(
      //   { path: '/searchpage' }
      // )
      // }
      getSearchlist({
        type: "article",
        kw: val,
        sort: sort.value,
        
      }).then((data: any) => {
        console.log(data);
        // total.value = data.data.total;
        console.log('total=>', total.value);
        data.data.list.forEach((item: any) => {
          getSearchlistlist.value.push(item)
        })
        // getSearchlistlist.value = data.data.list
        relate_kwseo.value = data.data.relate_kw4seo


      })
    }
    // 取消事件
    const onCancel: any = () => {
      router.push(
        { path: '/searchpage' }
      )
    };

    // 点赞过滤器（万亿单位）
    function filters(value: number) {
      if (value < 10000) {
        return value;

      }
      let w: any = value > 10000 ? value / 10000 : value; //万计算
      let y: any = w / 10000;
      let z: any = w > 10000 ? parseInt(y) + "亿" : parseInt(w) + "万";
      return z;
    }
    // 切换最新最热时点击事件
    let getdropdownvalue = (val: any) => {
      page = 1;
      console.log(val);
      if (val == 1) {
        sort.value = "addtime"
        getSearchlistFun()
        getSearchlistlist.value.sort(function(){
          return Math.random()-0.5;
        });

      } else if (val == 2) {
        sort.value = "hot"
        getSearchlistFun()
        getSearchlistlist.value.sort(function(){
          return Math.random()-0.5;
        });

      } else {
        sort.value = "default"
        getSearchlistFun()
      


      }


    }

    // 点击跳转视频详情页面
    let toparticulars = (videoid: any, video_library_id: any) => {
      router.push({
        path: '/videoDes',
        query: {
          aid: videoid,
          mid: video_library_id,
          searchactive:1
        }

      })
    }
    // 点击跳转个人主页面数据
    let toauthorparticulars = (userid: any) => {
      router.push({
        path: '/userdetail',
        query: {
          userid: userid
        }

      })
    }



    // 标签点击事件
    let gettabnum = (val: any) => {
      console.log(val);
      if (val.name == 0) {
        getSearchlistFun()

      } else if (val.name == 1) {
        getSearchlistauthorFun()


      }

    }



    // 下拉选项
    const value1 = ref(0);
    const option1 = [
      { text: '全部', value: 0 },
      { text: '最新', value: 1 },
      { text: '最热', value: 2 },
    ];
    onMounted(() => {
      if(route.query.searchactive){
        searchactive=route.query.searchactive
      }
    })
    watch(value, () => {
      console.log(value);
      if (value.value == '') {
        router.push(
          { path: '/searchpage' }
        )
      }


    })



    return {
      value,
      onSearch,
      onCancel,
      active,
      actives,
      value1,
      option1,
      getSearchlistlist,
      relate_kwseo,
      authorlist,
      idarr,
      filters,
      gettabnum,
      getdropdownvalue,
      toparticulars,
      toauthorparticulars,
      viewCount,
      vidotime,
      increment,
      incrementfalse,
      isloading,
      total,
      searchactive
    }
  }
})
</script>
<template>
  <div class="searchpage" v-if="getSearchlistlist">
    <!-- 搜索框开始 -->
    <!-- <search-input></search-input> -->
    <div class="searchpage-input">
      <form action="/">
        <van-search v-model="value" show-action placeholder="搜索作品、创作人、正版素材" @search="onSearch" @cancel="onCancel" />
      </form>

    </div>
    <!-- 分割线 -->
    <!-- <div class="division"></div> -->
    <div class="searchpage-main-content">
      <van-tabs v-model:active="searchactive" color="#e02619" line-width="26" @click-tab="gettabnum">
        <van-tab title="作品">
          <div class="searchpage-top">
            <div style="width: 30%;">
              <van-dropdown-menu active-color="red">
                <van-dropdown-item v-model="value1" :options="option1" @change="getdropdownvalue" />
              </van-dropdown-menu>
            </div>
          </div>




          <div class="searchpage-content">
            <div class="searchpage-allnum">共<span> {{ total }} </span>部作品</div>
            <div>
              <!-- 主要内容开始 -->
              <div class="worksshow-content-main">
                <!-- 遍历区域 -->
                <div class="worksshow-content" v-for="item in getSearchlistlist" :key="item.id"
                  @click.stop="toparticulars(item.id, item.vid)">
                  <div class="worksshow-vido">
                    <img :src="item.cover + '?param=5y5'" alt="">
                  </div>
                  <div class="worksshow-size">
                    <div class="works-size-title text-cut">{{ item.title }}</div>
                    <div class="works-numall">
                      <div class="work-numall-num">播放量{{ filters(item.count.count_view) }}</div>
                      <!--  -->
                      <span>.</span>
                      <div class="work-like">喜欢{{ filters(item.count.count_like) }}</div>
                    </div>
                    <div class="author" @click="toauthorparticulars(item.author.id)">
                      <div class="author-heardimage">
                        <img :src="'https://images.weserv.nl/?url=' + item.author.userinfo.avatar" alt="">
                        <div class="smallimage" v-if="item.author.userinfo.vip_flag == 1" style="background-color: #fff;">
                          <img src="../assets/images/177会员、vip.png" />
                        </div>
                      </div>
                      <div class="author-name">
                        {{ item.author.userinfo.username }}
                        <div class="author-identification iconfont icon-VIP1" v-if="item.author.userinfo.vip_flag == 1">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <van-loading size="24px" v-if="getSearchlistlist.length!=total&&isloading" style="text-align: center;line-height:40px;">加载中...</van-loading>
      <em style="text-align: center;font-size: 14px;background-color:#fff;line-height:40px;color: #a5a5a5; 
    width: 100%;
    display: inline-block;" v-if="getSearchlistlist.length==total">暂无更多了~</em>
        </van-tab>
        <van-tab title="创作人">
          <!-- 全部创作人列表 -->
          <div class="creator" v-if="authorlist">
            <div class="total">
              共<span> {{ authorlist.length }} </span>位创作人
            </div>
            <div class="creatorList" v-for="item in authorlist" :key="item.id">
              <ul>
                <li>
                  <div class="topinfo">
                    <div class="infoleft">
                      <div class="creatorimg">
                        <img :src="'https://images.weserv.nl/?url=' + item.avatar + '?param=50y50'" alt=""
                          @click="toauthorparticulars(item.id)">
                        <div class="logo" v-if="item.vip_flag == 1" style="background-color: #fff;">
                          <img src="../assets/images/177会员、vip.png" alt="" />
                        </div>
                      </div>
                      <div class="creatorinfo">
                        <div class="name">
                          {{ item.username }}
                          <div class="author-identification iconfont icon-VIP1" v-if="item.vip_flag == 1"></div>

                        </div>
                        <div class="tag">
                          {{ viewCount(item.count.count_follower) }}粉丝

                          <div style="display: inline-block;" v-if="item.location.country">
                            <span>|</span>{{ item.location.province.name }}
                          </div>

                          <span>|</span>
                          制作机构
                        </div>
                        <div class="idfine" v-if="item.verify_description">
                          {{ item.verify_description }}
                        </div>
                      </div>
                    </div>
                    <div class="inforight" @click.stop="increment(item.id)" v-if="!idarr.includes(item.id)">
                      关注
                    </div>
                    <div class="inforight" @click.stop="incrementfalse(item.id)" v-else>
                      已关注
                    </div>

                  </div>
                  <div class="creator-video">
                    <ul class="creator-video-ul">
                      <li v-for="lis in item.articles" @click="toparticulars(item.id, item.vid)">
                        <div class="video">
                          <img :src="lis.cover + '?param=50y50'" alt="">
                          <div class="mask">
                            {{ vidotime(lis.duration) }}
                          </div>
                        </div>
                        <div class="title one-text-cut">
                          {{ lis.title }}
                        </div>
                      </li>
                      <!-- <li>
                                  <div class="video">
                                    <img src="../assets/images/swiper1.webp" alt="">
                                    <div class="mask">
                                      52'05''
                                    </div>
                                  </div>
                                  <div class="title one-text-cut">
                                    只用字，做个高端宣传片
                                  </div>
                                </li> -->
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>


        </van-tab>
      </van-tabs>
    </div>


  </div>
</template>
<style lang="scss" scoped>
::v-deep .van-dropdown-menu__bar {
  box-shadow: none !important;
}

::v-deep .van-dropdown-menu__item {
  justify-content: flex-start;

}

.searchpage {
  .searchpage-main-content {
    .searchpage-top {
      padding-left: 7px;
    }

    .searchpage-content {
      .searchpage-allnum {
        padding: 0 15px;
        font-size: 14px;

        span {
          color: #cb493d;
          font-weight: 600;
        }
      }

    }

    .worksshow-content-main {
      padding: 12px 15px;

      .worksshow-content {
        padding: 12px 0;

        // width: 100%;
        // border: 1px solid;
        border-bottom: 1px solid #f9f9f9;
        display: flex;
        justify-content: space-between;

        .worksshow-vido {
          width: 45%;
          height: 88px;
          background: #bbbbbb;
          border-radius: 10px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;

          }

        }

        .worksshow-size {
          width: 50%;

          .works-size-title {
            font-size: 14px;
            line-height: 20px;
            font-weight: 600;
            height: 40px;
            padding-top: 5px;

          }

          .works-numall {
            display: flex;
            font-size: 10px;
            margin-top: 5px;

            .work-numall-num {
              color: #bbbbbb;
              margin-right: 5px;
            }

            span {
              margin-right: 5px;
              color: #bbbbbb;


            }

            .work-like {
              color: #bbbbbb;


            }
          }

          .author {
            display: flex;
            height: 16px;
            // background: aqua;
            margin-top: 5px;

            .author-name {
              font-size: 10px;
              margin-right: 8px;
              display: flex;
            }

            .author-identification {
              color: rgb(231, 45, 75);
            }

            .author-heardimage {
              width: 14px;
              height: 14px;
              background-color: #bbbb;
              margin-right: 8px;
              position: relative;
              border-radius: 50%;

              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }

              .smallimage {
                position: absolute;
                top: 8px;
                right: -2px;
                width: 8px;
                height: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;

                img {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }

    }
  }
}

.author-identification {
  color: rgb(231, 45, 75);
}

.creator {
  margin: 0 15px;

  .total {
    font-size: 14px;
    color: #a8aaae;
    margin-top: 19px;
    line-height: 15px;

    span {
      color: #cb493d;
      font-weight: 600;
    }
  }

  .creatorList {
    border-bottom: 1px solid #f6f6f6;
    padding-bottom: 12px;

    &>ul {
      li {
        .topinfo {
          display: flex;
          justify-content: space-between;
          padding-top: 15px;

          .infoleft {
            display: flex;

            .creatorimg {
              position: relative;

              img {
                width: 47px;
                height: 47px;
                border-radius: 50%;
              }

              .logo {
                position: absolute;
                top: 30px;
                right: 0;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;

                img {
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                }
              }
            }

            .creatorinfo {
              margin-left: 10px;

              .name {
                font-size: 15px;
                font-weight: 600;
                color: #080d1e;
                line-height: 25px;
                display: flex;

                .author-identification {
                  margin-left: 5px;
                }
              }

              .tag {
                color: #98989a;
                font-size: 12px;
                line-height: 20px;

                span {
                  margin: 0 5px;
                }

              }

              .idfine {
                color: #98989a;
                font-size: 12px;
                line-height: 23px;

              }
            }
          }

          .inforight {
            color: #c93618;
            background-color: #fee2e0;
            height: 28px;
            width: 62px;
            border-radius: 20px;
            text-align: center;
            line-height: 28px;
            font-size: 12px;
          }
        }

        .creator-video {
          margin-top: 4px;

          &>ul {
            display: flex;
            justify-content: space-between;

            li {
              width: 49%;

              .video {
                position: relative;

                img {
                  width: 100%;
                  border-radius: 10px;
                }

                .mask {
                  position: absolute;
                  bottom: 4px;
                  right: 8px;
                  color: #fff;
                  font-size: 12px;
                }

              }

              .title {
                font-size: 12px;
                line-height: 23px;
                color: #1a222a;
                font-weight: 600;
              }

            }
          }
        }
      }
    }
  }
}
</style>